import { addNumberAction, subNumberAction } from "@/store/modules/counter"
import { useDispatch, useSelector, shallowEqual } from "react-redux"
import React from "react"

const Index = function () {
  const state = useSelector(
    (state) => ({
      count: state.counter.count
    }),
    shallowEqual
  ) // 使用shallowEqual使父组件更新相同的state.module数据，也不会更新（需要配合memo浅层比较函数)
  console.log(state, "index render")
  const dispatch = useDispatch()
  const addNumber = (n) => {
    dispatch(addNumberAction(n))
  }
  const subNumber = (n) => {
    dispatch(subNumberAction(n))
  }
  return (
    <div>
      <button
        onClick={() => {
          addNumber(1)
        }}
      >
        加1
      </button>
      <div>{state.count}</div>
      <button
        onClick={() => {
          subNumber(1)
        }}
      >
        减1
      </button>
    </div>
  )
}

// 不需要写一大堆的mapStateToProps，而且可以把业务高内聚在对应的函数组件内
export default React.memo(Index)
